import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Radio, message, Checkbox, } from 'antd';
import {
  noticeSave,
  noticeUpdate,
} from '@/api/api'

const AddNotice = (props, ref) => {
  const { visible, setVisible, type, noticeItem, reload, noticeObj,defaultType } = props
  console.log(noticeObj)
  console.log(noticeItem)
  console.log(defaultType)
  const [addEditForm] = Form.useForm();
  const [values] = useState({
    content: '',
  })
  
  console.log(values)
  // 添加提交
  const onOk = () => {
    addEditForm.validateFields()
      .then(async values => {
        try {
          let { content, status, title, merchant, member } = values
          
          console.log(values)
          let params = {
            title,
            content,
            status,
            merchant,
            member,
          }
          if (type === 'edit') {
            params.id = noticeItem.id
          }
          let interFn = type === 'edit' ? noticeUpdate : noticeSave;
          let res = await interFn(params)
          if (res.code === 0) {
            message.destroy()
            message.success(type === 'edit' ? '修改成功' : '添加成功')
            addEditForm.resetFields();
            setVisible(false)
            reload()
          }
        } catch (error) {
          console.log(error)
        }
      }).catch(info => {
        console.log('Validate Failed:', info);
      });
  }
  // 监听数据
  useEffect(() => {
    if (type === 'edit') {
      addEditForm.resetFields();
      addEditForm.setFieldsValue({
        'content': noticeItem.content
      })
      addEditForm.setFieldsValue({
        'title': noticeItem.title
      })
      addEditForm.setFieldsValue({
        'member': noticeItem.member
      })
      addEditForm.setFieldsValue({
        'merchant': noticeItem.merchant
      })
      addEditForm.setFieldsValue({
        'status': noticeItem.status
      })
    } else {
      addEditForm.resetFields();
    }
    return () => {};
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type, noticeItem, addEditForm])
  return (
    <Modal title={type === 'edit' ? "修改公告" : "新增公告"} visible={visible} onOk={onOk} onCancel={() => {
      setVisible(false)
    }}>
      <div className='addmember-form'>
        <Form
          form={addEditForm}
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 18 }}
          initialValues={values}
          autoComplete="off">
          <Form.Item
            label="公告标题"
            name="title"
            rules={[
              { required: true, message: '请输入公告标题!' },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="公告内容"
            name="content"
            rules={[
              { required: true, message: '请输入公告内容!' },
            ]}
          >
            <Input.TextArea rows={3} />
          </Form.Item>
          <Form.Item
            label="会员端"
            name="member"
            rules={[
              { required: true, message: '请选择是否通知会员端!' },
            ]}
          >
            <Radio.Group>
              <Radio value={1}>通知</Radio>
              <Radio value={0}>不通知</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="商户端"
            name="merchant"
            rules={[
              { required: true, message: '请选择是否通知商户端!' },
            ]}
          >
            <Radio.Group>
              <Radio value={1}>通知</Radio>
              <Radio value={0}>不通知</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="公告状态"
            name="status"
            rules={[
              { required: true, message: '请选择公告状态!' },
            ]}
          >
            <Radio.Group>
              <Radio value={1}>启用</Radio>
              <Radio value={0}>停用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}
export default AddNotice